class BiShun {
    writerSize = 73;
    data = [];

    constructor(writerSize) {
        this.writerSize = writerSize;
        this.index = 0;
    }

    init = () => {
        const code = this.getQueryString("code");
        this.getData(code);
        this.printWordData();
        this.refreshZiWriter();
        $("#button-previous").on("click", () => this.previousItem());
        $("#button-next").on("click", () => this.nextItem());
    }

    getData(code) {
        $.ajaxSettings.async = false;
        $.get("/resource/data/grade/" + code + ".json", (result) => {
            const data = result.data;
            for (let str of data) {
                if ((/[\u4e00-\u9fa5]/).test(str)) {
                    this.data.push(str);
                }
            }
        });
    }


    drawPaper = (callback) => {
        const itemHtml = this.getItemHtml('item-' + this.index);
        $("#paper-box").append(itemHtml);
        callback();
    }

    hzToWriter = () => {
        if (this.index < this.data.length) {
            const hanZi = this.data[this.index];
            this.addHanZiWriter(hanZi, this.index);
        }

    }

    addHanZiWriter = (hanZi, index) => {
        const writer = HanziWriter.create('item-' + index, hanZi, {
            charDataLoader: function (char, onComplete) {
                const hanZiMd5 = md5(hanZi);
                $.getJSON("/resource/data/bihua/" + hanZiMd5 + ".json", function (charData) {
                    onComplete(charData);
                });
            },
            width: this.writerSize,
            height: this.writerSize,
            padding: 5,
            delayBetweenLoops: 3000,
        });
        // 演示
        // writer.loopCharacterAnimation();
        // 手写
        writer.quiz({
            onComplete: () => {
                setTimeout(() => {
                    this.nextItem();
                }, 1300);

            }
        });
    }

    getItemHtml = (id) => {
        return `<svg xmlns="http://www.w3.org/2000/svg" width="` + this.writerSize + `" height="` + this.writerSize + `" class="font-box" id="` + id + `">
            <line x1="0" y1="0" x2="` + this.writerSize + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize + `" y1="0" x2="0" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize / 2 + `" y1="0" x2="` + this.writerSize / 2 + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="0" y1="` + this.writerSize / 2 + `" x2="` + this.writerSize + `" y2="` + this.writerSize / 2 + `" stroke="#DDD" />
        </svg>
    `;
    }

    previousItem = () => {
        if (this.index - 1 >= 0) {
            this.index -= 1;
            this.refreshZiWriter();
            $("#button-next").removeClass("disabled");
        } else {
            $("#button-previous").addClass("disabled");
        }
    }

    nextItem = () => {
        if (this.index + 1 < this.data.length) {
            this.index += 1;
            this.refreshZiWriter();
            $("#button-previous").removeClass("disabled", false);
        } else {
            $("#button-next").addClass("disabled", true);
        }
        this.selectWordData();
    }

    refreshZiWriter = () => {
        $("#paper-box").html("");
        this.drawPaper(() => {
            this.hzToWriter();
        });
        this.selectWordData();
    }

    getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    printWordData = () => {
        const words = this.data;
        for (let i = 0; i < words.length; i++) {
            const a = $('<a class="btn btn-light btn-sm" href="#" role="button">' + words[i] + '</a>')
            a.on('click', () => {
                this.selectWord(i)
            });
            $("#word-data").append(a);
        }
        this.selectWordData();
    }
    selectWordData = () => {
        $("#word-data > a").removeClass("btn-primary").addClass("btn-light");
        $("#word-data > a:eq(" + this.index + ")").removeClass("btn-light").addClass("btn-primary");
    }
    selectWord = (index) => {
        this.index = index;
        this.selectWordData();
        this.refreshZiWriter();
    }

    onComplete = () => {

    }

}
